<template>
  <div class="table-container">
    <div class="table-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>品牌管理</el-breadcrumb-item>
        <el-breadcrumb-item>品牌列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="table-search">
      <el-row style="width: 100%;display: flex;justify-content: flex-end">
        <el-col :span="3">
          <el-select v-model="search.select_type" placeholder="品牌类型" style="margin-right: 10px">
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-input
            style="width: 200px;margin-right: 10px"
            placeholder="品牌名关键字检索"
            v-model="search.keyword"
            clearable
            @clear="resetData"
          >
          </el-input>
        </el-col>
        <el-button type="primary" @click="resetData">搜索</el-button>
        <el-button type="warning" @click="clear">重置条件</el-button>
      </el-row>
    </div>
    <div class="table-content">
      <div class="table-bar">
        <el-button type="primary" @click="handleAdd">新增</el-button>
      </div>
      <el-table
        border
        empty-text="当前数据空空如也"
        ref="multipleTable"
        :data="brands"
        tooltip-effect="dark"
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="id" label="ID" width="60"></el-table-column>
        <el-table-column prop="type" label="品牌类型" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.type == '1'">家居类</span>
            <span v-if="scope.row.type == '2'">泛家居类</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="品牌名"></el-table-column>
        <el-table-column prop="logo" label="LOGO" width="auto">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.logo"
              style="width: 100px; height: 50px"
              :src="scope.row.logo"
              :preview-src-list="[scope.row.logo]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="utime" label="更新时间" width="auto">
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="auto"></el-table-column>
        <el-table-column label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              style="margin-right: 5px"
              @click="handleDetails(scope.$index, scope.row)">详情
            </el-button>
            <el-popconfirm
              confirm-button-text='确定'
              cancel-button-text='点错了'
              icon="el-icon-info"
              icon-color="red"
              title="你确定删除该品牌吗？"
              @confirm="handleDel(scope.index,scope.row)"
            >
              <el-button slot="reference" type="danger" size="mini">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="page-nav">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="search.page"
          :page-sizes="[10, 20, 30, 50,100]"
          :page-size="search.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="search.total">
        </el-pagination>
      </div>
    </div>

    <el-drawer
      title="查看详情"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div>
        <el-form ref="form" :model="brand" label-width="160px">
          <el-form-item label="品牌名:">
            <span>{{brand.name}}</span>
          </el-form-item>
          <el-form-item label="品牌LOGO:">
            <div>
              <el-image
                style="width: 100px; height: 100px"
                :src="brand.logo"
                :preview-src-list="[brand.logo]">
              </el-image>
            </div>
          </el-form-item>
          <el-form-item label="更新时间:">
            <span>{{brand.utime}}</span>
          </el-form-item>
          <el-form-item label="排序:">
            <span>{{brand.sort}}</span>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading:false,
        search: {
          page: 1,
          pagesize: 10,
          total: 0,
          keyword: '',
          select_type: '',
        },
        brands: [],
        dialogPlay: false,
        videoUrl: '',
        brand: {},
        drawer: false,
        direction: 'rtl',
        types: [
          {
            value: '1',
            label: '家居类'
          },
          {
            value: '2',
            label: '泛家居类'
          }
        ]
      }
    },
    mounted() {
      this.queryList();
    },
    methods: {
      handleDetails(index, row) {
        this.drawer = true;
        this.brand = {
          ...row
        }
      },

      handleDel(index, row) {
        const _the = this;
        this.$http.post('/api/root/brand/del', {
          id: row.id
        }).then(rest => {
          if (rest.msg === 'ok') {
            this.$message.success('删除成功');
            setTimeout(function () {
              _the.queryList();
            }, 600)
          }
        })
      },

      handleAdd() {
        this.$router.push({name: 'brandAdd'})
      },

      handleEdit(index, row) {
        const id = row.id;
        this.$router.push({name: 'brandEdit', query: {id}})
      },

      handleClose(done) {
        done();
        this.brand = {};
      },

      handleSizeChange(val) {
        this.search.pageSize = val;
        this.search.page = 1;
        this.queryList()
      },
      handleCurrentChange(val) {
        this.search.page = val;
        this.queryList();
      },
      queryList() {
        this.loading = true;
        this.$http.get('/api/root/brand/index', {...this.search}).then(rest => {
          if (rest.code == 1) {
            this.brands = rest.data.data;
            this.search.total = rest.data.count;
          }
          this.loading = false;
        })
      },
      resetData() {
        this.search.page = 1;
        this.queryList();
      },
      clear() {
        this.search = {
          page: 1,
          pagesize: 10,
          total: 0,
          keyword: '',
          select_type: '',
        };
        this.queryList();
      }
    }
  }
</script>
<style lang="less" scoped>
  @import 'index.less';
</style>
